<template>
    <div class="tags-nav">
        <div class="mainNavList">
            <router-link v-for="(x, index) in routeList" :key="index" :to="{name: x.pathName}" :class="currentPath.indexOf(x.path) > -1 ? 'mainNavItem active' : 'mainNavItem'">{{x.name}}</router-link>
        </div>
    </div>
</template>
<script>
export default {
    name: 'tagsNav',
    props: {
      routeList: {
        type: Array,
        default: []
      }
    },
    data() {
        return{
            currentPath: '',
        }
    },
    mounted (){
        this.currentPath = this.$route.path
    },
    watch:{
        $route (to,from){
            this.currentPath = this.$route.path
        },
    }
}
</script>
<style lang="scss">
// 基础颜色
$color-primary: #2E89FF; // 系统主色
$color-success: #0EC00F; // 成功
$color-warning: #FF941D; // 警告
$color-danger: #FF6565;  // 错误
$color-info: #BBBBBB;    // 信息
// 背景颜色
$header-background: #2E89FF; // 头部背景色
$app-background: #E9E9F0; // 全局背景色
$page-background: #E9E9F0; // 页面背景色
$page-background-light: #F7F7F9; // 布局背景色
// 字体颜色
$font-primary: #333;    // 字体正文颜色(黑色)
$font-result: #666;     // 字体提示颜色(灰色)
$font-info: #999;       // 字体提示颜色(灰色)
$font-pop: #646464;     // pop弹框字体颜色

$hover-backgoround: #DEE7F9; // 列表hover背景颜色
$border-color: #E1E1E1; // 线的颜色
$border-color-search: #BBBBBB; // 搜索框border颜色
$tr-light-background: #E7EDF8;
$tr-background: #F7F7F9;
$th-background: #DEE7F9;


// scrollbar
$scrollbar-width:           6px;
$scrollbar-height:          6px;
$scrollbar-track-color:     transparent;
$scrollbar-thumb-color:     #bbb;
//===========================================
.tags-nav{
    // min-width: 1234px;
    min-width: 500px;
    height: 60px;
    line-height: 56px;
    background: #fff;
    position: relative;
    border-bottom: 1px solid #e8e8e8;
    // text-align: center;

    .mainNavtitle{
      font-size: 18px;
      font-family: PingFangSC-Medium;
      font-weight: 500;
      color: $font-primary;
      position: absolute;
      left: 14px;
    }
    .mainNavList{
        .mainNavItem {
            height: 60px;
            display: inline-block;
            padding: 0 24px;
            font-size: 16px;
            font-family: PingFangSC-Regular;
            font-weight:400;
            border: 1px solid rgba(232,232,232,1);
            border-left: 0;
            border-bottom: none;
            &.active {
                color: $color-primary;
                background-color: #fff;
                border-top: 3px solid $color-primary;
                line-height: 51px;
                box-sizing: border-box;
                border-bottom: none;
                height: 60px;
            }
          }
    }
}
</style>


